<style lang="less">
@import 'deviceAlertSetting.less';
</style>
<template>
  <div class="search">
    <Row>
      <Col>
      <Card>
        <Row>
          <Form ref="searchForm"
                :model="searchForm"
                inline
                :label-width="100"
                @submit.native.prevent
                class="search-form">
            <Form-item label="警报名称"
                       prop="alarmName">
              <Input type="text"
                     v-model="searchForm.alarmName"
                     clearable
                     placeholder="请输入警报名称"
                     style="width: 200px" />
            </Form-item>

            <Form-item style="margin-left:-35px;"
                       class="br">
              <Button @click="handleSearch"
                      type="primary"
                      icon="ios-search">搜索
              </Button>
              <Button @click="handleReset">重置</Button>
            </Form-item>
          </Form>
        </Row>
        <Row class="operation">
          <Button @click="add"
                  v-has="'add'"
                  type="primary"
                  icon="md-add">添加警报
          </Button>
        </Row>
        <Row>
          <Table :loading="loading"
                 border
                 max-height="600"
                 :columns="columns"
                 :data="data"
                 sortable="custom"
                 @on-sort-change="changeSort"
                 @on-selection-change="showSelect"
                 ref="table"></Table>
        </Row>
        <Row type="flex"
             justify="end"
             class="page">
          <Page :current="searchForm.current"
                :total="total"
                :page-size="searchForm.size"
                @on-change="changePage"
                @on-page-size-change="changePageSize"
                :page-size-opts="[10,20,50,100]"
                size="small"
                show-total
                show-elevator
                show-sizer></Page>
        </Row>
      </Card>
      </Col>
    </Row>

    <Modal :title="modalTitle"
           v-model="deviceAlertModalVisible"
           :mask-closable="false"
           :width="600"
           :styles="{top: '30px'}">
      <Form ref="deviceAlertForm"
            :model="deviceAlertForm"
            :label-width="140"
            :rules="deviceAlarmRuleForm">

        <FormItem label="报警代码">
          <Select v-model="deviceAlertForm.alarmCode"
                  label-in-value
                  @on-change="onAlarmCodeChange">
            <Option v-for="item in alarmCodeList"
                    :value="item.value"
                    :disabled="item.label == '预留'"
                    :key="item.value">{{ item.label }}
            </Option>
          </Select>
        </FormItem>

        <Form-item label="警报名称"
                   prop="alarmName">
          <Input type="text"
                 v-model="deviceAlertForm.alarmName"
                 clearable
                 disabled
                 placeholder="请输入警报名称" />
        </Form-item>

        <FormItem label="播报内容"
                  prop='alarmPlayText'>
          <Input v-model="deviceAlertForm.alarmPlayText"
                 placeholder='请输入报警时播报的内容'></Input>
        </FormItem>

        <FormItem label="警报类型">
          <Select v-model="deviceAlertForm.alarmType">
            <Option v-for="item in alertTypeList"
                    :value="item.value"
                    :key="item.value">{{ item.label }}
            </Option>
          </Select>
        </FormItem>

        <FormItem label="风险级别">
          <Select v-model="deviceAlertForm.riskLevel">
            <Option v-for="item in riskLevelList"
                    :value="item.value"
                    :key="item.value">{{ item.label }}
            </Option>
          </Select>
        </FormItem>

        <FormItem label="扣分系数">
          <Select v-model="deviceAlertForm.score">
            <Option v-for="item in scoreList"
                    :value="item.value"
                    :key="item.value">{{ item.label }}
            </Option>
          </Select>
        </FormItem>

        <FormItem label="处理方式"
                  prop="dealType">
          <RadioGroup v-model="deviceAlertForm.dealType">
            <Radio :label="1"
                   :value="1">人工处理
            </Radio>
            <Radio :label="2"
                   :value="2">自动处理
            </Radio>
          </RadioGroup>
        </FormItem>

      </Form>
      <div slot="footer">
        <Button type="text"
                @click="deviceAlertModalVisible = false">取消
        </Button>
        <Button type="primary"
                :loading="submitLoading"
                @click="submit">提交
        </Button>
      </div>
    </Modal>

  </div>
</template>

<script>
import {
  getDevAlarmList,
  addDevAlarm,
  editDevAlarm,
  deleteDevAlarm
} from '@/api/operate'
import { validateMobile, validatePassword, validateBool } from '@/libs/validate'

import {
  riskLevelList,
  scoreList,
  dealTypeList,
  alertTypeList,
  alarmCodeList
} from '@/libs/dict.js'
import departmentChoose from '../../my-components/xboot/department-choose'
import departmentTreeChoose from '../../my-components/xboot/department-tree-choose'
import uploadPicInput from '../../my-components/xboot/upload-pic-input'
import circleLoading from '../../my-components/circle-loading.vue'
import checkPassword from '@/views/my-components/xboot/check-password'
import util from '@/libs/util.js'

export default {
  name: 'basic-information',
  components: {
    circleLoading,
    departmentChoose,
    departmentTreeChoose,
    uploadPicInput,
    checkPassword
  },
  data() {
    return {
      loading: false,
      riskLevelList: riskLevelList,
      scoreList: scoreList,
      dealTypeList: dealTypeList,
      alertTypeList: alertTypeList,
      alarmCodeList: alarmCodeList,
      deviceAlertModalVisible: false,
      birthDay: '',
      viewImage: false, // 查看大图
      currentValue: '', // 大图的url
      total: 0,
      data: [],
      searchForm: {
        createBy: '',
        createDate: '',
        current: 1,
        size: 100
      },
      deviceAlertForm: {
        deviceAlarmId: 1,
        companyId: 2,
        oepratorId: 0,
        alarmName: '',
        alarmCode: '',
        riskLevel: 0,
        score: 0,
        dealType: 0,
        alarmPlayText: '',
        createBy: '',
        createDate: ''
      },
      deviceAlarmRuleForm: {
        alarmName: [
          { required: true, message: '警报名称不能为空', trigger: 'blur' }
        ]
      },
      columns: [
        {
          title: '序号',
          type: 'index',
          width: 65,
          align: 'center',
          fixed: 'left'
        },
        {
          title: '报警名称',
          key: 'alarmName',
          minWidth: 140,
          sortable: true,
          align: 'center',
          fixed: 'left'
        },
        {
          title: '警报类型',
          key: 'alarmType',
          minWidth: 140,
          align: 'center',
          render: (h, params) => {
            return h(
              'span',
              this.alertTypeList.find(item => {
                return item.value == params.row.alarmType
              }).label
            )
          }
        },
        {
          title: '警报代码',
          key: 'alarmCode',
          minWidth: 140,
          align: 'center',
          render: (h, params) => {
            return h(
              'span',
              this.alarmCodeList.find(item => {
                return item.value == params.row.alarmCode
              }).label
            )
          }
        },
        {
          title: '风险等级',
          key: 'riskLevel',
          minWidth: 120,
          align: 'center',
          render: (h, params) => {
            return h(
              'span',
              this.riskLevelList.find(item => {
                return item.value == params.row.riskLevel
              }).label
            )
          }
        },
        {
          title: '扣分系数',
          key: 'score',
          minWidth: 120,
          align: 'center',
          render: (h, params) => {
            return h(
              'span',
              this.scoreList.find(item => {
                return item.value == params.row.score
              }).label
            )
          }
        },
        {
          title: '处理方式',
          key: 'dealType',
          minWidth: 120,
          align: 'center',
          render: (h, params) => {
            return h(
              'span',
              this.dealTypeList.find(item => {
                return item.value == params.row.dealType
              }).label
            )
          }
        },
        {
          title: '最近操作时间',
          key: 'createDate',
          sortable: true,
          align: 'center',
          sortType: 'desc',
          minWidth: 180
        },
        {
          title: '操作人',
          key: 'createBy',
          minWidth: 90,
          align: 'center'
        },
        {
          title: '操作',
          key: 'action',
          width: 180,
          align: 'center',
          fixed: 'right',
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  directives: [
                    {
                      name: 'has',
                      value: 'edit'
                    }
                  ],
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.edit(params.row)
                    }
                  }
                },
                '编辑'
              ),
              h(
                'Button',
                {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  directives: [
                    {
                      name: 'has',
                      value: 'delete'
                    }
                  ],
                  on: {
                    click: () => {
                      this.remove(params.row)
                    }
                  }
                },
                '删除'
              )
            ])
          }
        }
      ]
    }
  },
  catch: {},
  methods: {
    init() {
      this.requestDevAlarmList()
    },
    changePage(v) {
      this.searchForm.current = v
      this.requestDevAlarmList()
      this.clearSelectAll()
    },
    changePageSize(v) {
      this.searchForm.size = v
      this.requestDevAlarmList()
    },
    requestDevAlarmList() {
      // 多条件搜索用户列表
      this.loading = true
      getDevAlarmList(this.searchForm).then(res => {
        this.loading = false
        console.log('getDevAlarmList', res)
        if (res.code == 0) {
          this.data = res.data.records
          this.total = res.data.total
        }
      })
    },
    handleSearch() {
      this.searchForm.current = 1
      this.searchForm.size = 100
      this.requestDevAlarmList()
    },
    handleReset() {
      this.$refs.searchForm.resetFields()
      this.searchForm.current = 1
      this.searchForm.size = 100
      this.selectDate = null
      this.searchForm.startDate = ''
      this.searchForm.endDate = ''
      this.selectDep = []
      this.searchForm.departmentId = ''
      // 重新加载数据
      this.requestDevAlarmList()
    },
    changeSort(e) {
      this.searchForm.sort = e.key
      this.searchForm.order = e.order
      if (e.order == 'normal') {
        this.searchForm.order = ''
      }
      this.requestDevAlarmList()
    },
    add() {
      this.modalType = 0
      this.modalTitle = '添加设备警报'
      this.$refs.deviceAlertForm.resetFields()
      this.deviceAlertModalVisible = true
    },
    edit(v) {
      this.modalType = 1
      this.modalTitle = '编辑设备警报'
      this.$refs.deviceAlertForm.resetFields()
      // 转换null为""
      for (let attr in v) {
        if (v[attr] == null) {
          v[attr] = ''
        }
      }
      let str = JSON.stringify(v)
      let data = JSON.parse(str)
      this.deviceAlertForm = data
      this.deviceAlertModalVisible = true
    },
    remove(v) {
      this.$Modal.confirm({
        title: '确认删除',
        content: '您确认要删除警报 ' + v.alarmName + ' ?',
        loading: true,
        onOk: () => {
          deleteDevAlarm(v.deviceAlarmId).then(res => {
            this.$Modal.remove()
            if (res.code == 0) {
              this.$Message.success('删除成功')
              this.requestDevAlarmList()
            } else {
              this.$Message.error(res.msg)
            }
          })
        }
      })
    },
    dropDown() {},
    showSelect(e) {},
    clearSelectAll() {
      this.$refs.table.selectAll(false)
    },
    delAll() {},
    /**
     * 提交新增警报
     * @param newForm
     */
    submit() {
      console.log('submit', this.deviceAlertForm)
      let _this = this
      if (_this.modalType == 0) {
        _this.$refs.deviceAlertForm.validate(valid => {
          if (valid) {
            console.log('deviceAlertForm数据验证通过')

            console.log('addDevAlarm request', this.deviceAlertForm)
            addDevAlarm(_this.deviceAlertForm).then(
              res => {
                console.log('addDevAlarm response', JSON.stringify(res))
                _this.$refs.deviceAlertForm.resetFields()
                _this.deviceAlertModalVisible = false
                _this.requestDevAlarmList()
              },
              error => {
                console.log('submit error', JSON.stringify(error))
              }
            )
          } else {
            console.log('deviceAlertForm数据验证没有通过')
          }
        })
      } else {
        _this.$refs.deviceAlertForm.validate(valid => {
          if (valid) {
            console.log('editDevAlarm request', this.deviceAlertForm)
            editDevAlarm(_this.deviceAlertForm).then(
              res => {
                console.log('editDevAlarm response', JSON.stringify(res))
                _this.$refs.deviceAlertForm.resetFields()
                _this.deviceAlertModalVisible = false
                _this.requestDevAlarmList()
              },
              error => {
                console.log('submitUser error', JSON.stringify(error))
              }
            )
          }
        })
      }
    },
    /**
     * 查看Table中图片的大图
     * @param params
     */
    showBigImg(params) {
      this.viewImage = true
      this.currentValue = params
    },

    onBirthDayDateChange(e) {
      console.log('onBirthDayDateChange', e)
      this.birthDay = e
    },
    onAlarmCodeChange(event) {
      console.log('onAlarmCodeChange', event)
      this.deviceAlertForm.alarmName = event.label.trim()
    }
  },
  mounted() {
    this.init()
  }
}
</script>

<style scoped>
</style>
